import React from 'react'
import { string, func } from 'prop-types'
import { TabBarItemWrapper } from './styledTabbar'
import Icon from '../icon/Icon'

export default function TabBarItem(props) {
  const {
    name,
    children, 
    icon,  
    selectedIndex,
    handleItemClick,
    to
  } = props

  return (
    <TabBarItemWrapper
      color={selectedIndex === name ? '#2984F8' : '#333333'}
      onClick={handleItemClick(to, name)}
    >
      {selectedIndex === name ? <Icon name={icon} color = '#2984F8'></Icon> : <Icon name={icon} color = '#333333'></Icon>}
      <span>
        {children}
      </span>
    </TabBarItemWrapper>
  )
}

TabBarItem.propTypes = {
  name: string,
  children: string,
  icon: string,
  handleItemClick: func,
  to: string
}